<template>
  <div class="person-style">
    <!-- 导航栏 start -->
    <van-nav-bar title="简历" fixed />
    <!-- 导航栏 end -->

    <!-- 内容 -->
    <div class="content-top">
      <div class="resume-index" v-if="isLogin == true && hasResume == true">
        <!-- 简历信息 start -->
        <div class="resume-info">
          <!-- 基本信息 -->
          <div class="basic">
            <p>
              <span v-if="info.imgHeadUrl != ''">{{ info.headImgState }}</span>
              <img
                src="@/assets/img/my/no-avatar-boy.png"
                alt=""
                v-if="info.imgHeadUrl == '' && info.sex == '男'"
                @click="upload"
              />
              <img
                src="@/assets/img/my/no-avatar-girl.png"
                alt=""
                v-else-if="info.imgHeadUrl == '' && info.sex == '女'"
                @click="upload"
              />
              <img :src="info.imgHeadUrl" alt="" v-else @click="upload" />
            </p>
            <p>
              <b>{{ info.personName }}</b>
              <span>{{ info.resumeUpdateTime }}</span>
            </p>
          </div>
          <ul class="data">
            <li @click="show_action_resumeState = true">
              <span>{{ info.regStatue }}</span>
              <span>{{
                info.regStatue === "公开" ? "展示简历" : "不展示简历"
              }}</span>
            </li>
            <li @click="onRefuseCompanyClick">
              <span>{{ info.companyRefuseCount }}</span>
              <span>屏蔽企业</span>
            </li>
            <li @click="onApplyJobClick">
              <span>{{ info.positionApplyCount }}</span>
              <span>我的投递</span>
            </li>
            <!-- unread -->
            <li class="" @click="onInterviewClick">
              <span>{{ info.faceNoticeCount }}</span>
              <span>面试通知</span>
            </li>
          </ul>

          <!-- 附件简历 -->
          <div class="annex" @click="toResumeFile">
            <span>附件简历</span>
          </div>
        </div>
        <!-- 简历信息 end -->

        <!-- 简历提醒 start -->
        <div
          class="resume-hint"
          v-if="info.regStatue != '公开'"
          @click="onResumeStateActionSelect({ name: '公开' })"
        >
          <p>
            <b>您的简历处于隐藏状态</b>
            <span>开放简历让HR主动联系您</span>
          </p>
          <p>
            <span>立即开放</span>
          </p>
        </div>
        <!-- 简历提醒 end -->

        <!-- 简历操作 start -->
        <div class="resume-operate">
          <div class="level">
            <van-circle
              v-model="currentRate"
              layer-color="#ebedf0"
              size="100px"
              :rate="info.resumeFinishCount"
              :stroke-width="70"
              :speed="100"
              :color="gradientColor"
            >
              <template #default>
                <p class="progress">
                  <b>{{ info.score }}</b>
                  <span>简历评分</span>
                </p>
              </template>
            </van-circle>
            <ul>
              <li :class="{ yes: info.havBasic }">
                <i></i><span>基本信息</span>
              </li>
              <li :class="{ yes: info.havJobWanted }">
                <i></i><span>求职意向</span>
              </li>
              <li :class="{ yes: info.havEdu }">
                <i></i><span>教育经历</span>
              </li>
              <li :class="{ yes: info.havWork }">
                <i></i><span>工作经历</span>
              </li>
              <li :class="{ yes: info.havEvaluation }">
                <i></i><span>自我评价</span>
              </li>
              <li :class="{ yes: info.havSkill }">
                <i></i><span>专业技能</span>
              </li>
              <li :class="{ yes: info.havCertificate }">
                <i></i><span>证书情况</span>
              </li>
              <li :class="{ yes: info.havAddInfo }">
                <i></i><span>附加信息</span>
              </li>
            </ul>
          </div>
          <div class="btns">
            <van-button
              type="primary"
              text="编辑"
              @click="onEditResume"
            ></van-button>
            <van-button
              type="primary"
              text="刷新"
              :loading="loading_refreshResume"
              @click="onRefreshResume"
            >
            </van-button>
            <!-- <van-button type="primary" text="下载"></van-button> -->
          </div>
        </div>
        <!-- 简历操作 end -->
      </div>
      <div class="resume-login" v-if="isLogin == false">
        <span>您需要登录才可查看更多信息</span>
        <van-button round type="primary" text="登录" @click="onToLogin" />
      </div>
      <div class="resume-login" v-if="isLogin == true && hasResume == false">
        <span>您还没有简历</span>
        <van-button
          round
          type="primary"
          text="创建简历"
          @click="onToCreateResume"
        />
      </div>
    </div>

    <van-action-sheet
      v-model="show_action_resumeState"
      :actions="actions_resumeState"
      @select="onResumeStateActionSelect"
      cancel-text="取消"
      description="简历状态"
      close-on-click-action
    />
  </div>
</template>

<script>
import {
  checkPersonLogin,
  getPersonID,
  getToken,
  hasResume,
} from "@/util/session";
import { NavBar, Icon, Button, ActionSheet, Toast, Dialog, Circle } from "vant";
import {
  mixin_person_tologin,
  mixin_person_toCreateResume,
} from "@/mixin/mixins";
import { returnToPhoneWithData } from "@/util/phone";
import Global from "@/Global";
export default {
  name: "ResumeIndex",
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet,
    [Circle.name]: Circle,
  },
  mixins: [mixin_person_tologin, mixin_person_toCreateResume],
  // 定义属性
  data() {
    return {
      isInit: false,
      isLogin: checkPersonLogin(),
      hasResume: hasResume(),
      info: {},
      show_action_resumeState: false,
      actions_resumeState: [
        { name: "公开", subname: "展示简历" },
        { name: "保密", subname: "不展示简历" },
      ],
      currentRate: 0,
      gradientColor: {
        "0%": "#52c9ff",
        "100%": "#05A6F0",
      },
      loading_refreshResume: false,
    };
  },
  created() {
    if (this.hasResume) this.init();
  },
  mounted() {
    this.$bus.$on(Global.bus_person_login, () => {
      this.isLogin = checkPersonLogin();
      this.hasResume = hasResume();
      this.init();
    });
    this.$bus.$on(Global.bus_person_resume_update, () => {
      this.init();
    });
    window.uploadCallback = this.uploadCallback;
  },
  // 方法集合
  methods: {
    init() {
      this.$api.get("/Resume/GetResumeMainData").then((res) => {
        if (res.success) {
          this.info = res.response;
        }
      });
    },
    //简历action选择
    onResumeStateActionSelect(action, index) {
      this.$api
        .post("/Resume/UpdateResumeStatu?statue=" + action.name)
        .then((res) => {
          if (res.success) {
            this.info.regStatue = action.name;
          } else {
            Toast.fail(res.msg);
          }
        });
    },
    //屏蔽企业
    onRefuseCompanyClick() {
      this.$router.push({ name: "person-refuse" });
    },
    //我的投递
    onApplyJobClick() {
      this.$router.push({ name: "person-applyjob" });
    },
    //面试通知
    onInterviewClick() {
      this.$router.push({ name: "person-interview" });
    },
    //刷新简历
    onRefreshResume() {
      this.loading_refreshResume = true;
      this.$api.post("/Resume/RefreshResume").then((res) => {
        this.loading_refreshResume = false;
        if (res.success) {
          Toast.success("刷新成功");
          this.resumeUpdateTime = this.$dayjs(new Date()).format("yyyy-MM-dd");
        } else {
          Toast.fail(res.msg);
        }
      });
    },
    //编辑简历
    onEditResume() {
      this.$router.push({ name: "person-resume-all" });
    },
    //上传头像
    upload() {
      returnToPhoneWithData({
        action: "person_upload_photo",
        personid: getPersonID(),
        token: getToken(),
      });
    },
    //上传头像回调
    uploadCallback(imgUrl) {
      this.info.imgHeadUrl = imgUrl + "?v=" + new Date();
      this.$bus.$emit(Global.bus_person_resume_uploadHeadImg, imgUrl);
    },
    // 附件简历
    toResumeFile() {
      this.$router.push({ name: "person-resumefile" });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

.person-style .resume-index {
  padding: 15px 15px 65px;
}

/* 简历信息 */
.person-style .resume-index .resume-info {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  border-radius: 10px;
  background-color: #fff;
}

.person-style .resume-index .resume-info .annex {
  position: absolute;
  top: 22px;
  right: 0px;
  display: flex;
  align-items: center;
  height: 27px;
  padding: 0 7px 0 9px;
  border-radius: 20px 2px 2px 20px;
  background-color: #05a6f0;
}

.person-style .resume-index .resume-info .annex span {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.person-style .resume-index .resume-info .basic {
  display: flex;
  padding: 16px 0;
}

.person-style .resume-index .resume-info .basic p:nth-child(1) {
  position: relative;
  display: flex;
  flex: 0 0 70px;
  height: 70px;
  border-radius: 5px;
  margin-right: 16px;
  overflow: hidden;
}

.person-style .resume-index .resume-info .basic p:nth-child(1) img {
  width: 100%;
  height: 100%;
}

.person-style .resume-index .resume-info .basic p:nth-child(1) span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18px;
  border-radius: 2px 2px 0 0;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  color: #fff;
}

.person-style .resume-index .resume-info .basic p:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  height: 70px;
}

.person-style .resume-index .resume-info .basic p:nth-child(2) b {
  font-size: 24px;
  color: #333;
}

.person-style .resume-index .resume-info .basic p:nth-child(2) span {
  font-size: 14px;
  color: #999;
}

.person-style .resume-index .resume-info .basic p:nth-child(2) span:before {
  content: "刷新：";
}

.person-style .resume-index .resume-info .data {
  display: flex;
  border-top: 0.5px solid #e8e8e8;
}

.person-style .resume-index .resume-info .data li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 16px 0;
}

.person-style .resume-index .resume-info .data li.unread::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #f00;
}

.person-style .resume-index .resume-info .data li span:nth-child(1) {
  margin-bottom: 4px;
  font-size: 22px;
  font-weight: 500;
  color: #05a6f0;
}

.person-style .resume-index .resume-info .data li span:nth-child(2) {
  font-size: 12px;
  color: #333;
}

/* 状态提醒 */
.person-style .resume-index .resume-hint {
  display: flex;
  align-items: center;
  padding: 14px 15px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: rgba(5, 166, 240, 0.08);
}

.person-style .resume-index .resume-hint p:nth-child(1) {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.person-style .resume-index .resume-hint p:nth-child(1) b {
  font-size: 15px;
  color: #333;
}

.person-style .resume-index .resume-hint p:nth-child(1) span {
  font-size: 12px;
  color: #999;
}

.person-style .resume-index .resume-hint p:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex: 0 0 76px;
}

.person-style .resume-index .resume-hint p:nth-child(2) span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  border-radius: 28px;
  background-color: #05a6f0;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

/* 简历操作 */
.person-style .resume-index .resume-operate {
  padding: 0 15px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}

.person-style .resume-index .resume-operate .level {
  display: flex;
  align-items: center;
  padding: 16px 2px;
}

.person-style .resume-index .resume-operate .level p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.person-style .resume-index .resume-operate .level p b {
  display: flex;
  align-items: flex-end;
  font-size: 28px;
  color: #05a6f0;
  line-height: 1.2;
}

.person-style .resume-index .resume-operate .level p span {
  font-size: 12px;
  color: #888;
}

.person-style .resume-index .resume-operate .level ul {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  margin-left: 10px;
}

.person-style .resume-index .resume-operate .level ul li {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 50%;
  height: 28px;
}

.person-style .resume-index .resume-operate .level ul li i {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: #eee;
}

.person-style .resume-index .resume-operate .level ul li i::before,
.person-style .resume-index .resume-operate .level ul li i::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 3px;
  left: 50%;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  margin-top: -4px;
  background-color: #fff;
}

.person-style .resume-index .resume-operate .level ul li i::before {
  transform: rotate(45deg);
}

.person-style .resume-index .resume-operate .level ul li i::after {
  transform: rotate(-45deg);
}

.person-style .resume-index .resume-operate .level ul li span {
  margin-right: 4px;
  font-size: 14px;
  color: #c4c4c4;
}

.person-style .resume-index .resume-operate .level ul li.yes i {
  background-color: #05a6f0;
}

.person-style .resume-index .resume-operate .level ul li.yes i::before {
  width: 4px;
  height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  margin-top: -5.5px;
  margin-left: -2.5px;
  background-color: #05a6f0;
}

.person-style .resume-index .resume-operate .level ul li.yes i::after {
  display: none;
}

.person-style .resume-index .resume-operate .level ul li.yes span {
  color: #333;
}

.person-style .resume-index .resume-operate .btns {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-top: 0.5px solid #e8e8e8;
}

.person-style .resume-index .resume-operate .btns button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 60px;
  height: 60px;
  padding: 0;
  border-color: #05a6f0;
  border-radius: 50%;
  background-color: #fff;
  font-size: 16px;
  color: #05a6f0;
  line-height: 1;
}

.person-style .resume-index .resume-operate .btns button:nth-child(1) {
  background-color: #05a6f0;
  color: #fff;
}

/* 我的主页-去登录 */
.resume-login {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 84%;
}

.resume-login span {
  font-size: 16px;
  color: #666;
}

.resume-login button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 34px;
  padding: 0;
  border: none;
  margin-top: 15px;
  background-color: #05a6f0;
}

.resume-login button span {
  font-size: 17px;
  color: #fff;
}
</style>
